
import { CloseOutlined, LoadingOutlined, PlusOutlined } from "@ant-design/icons";
import { message } from "antd";
import Upload, { RcFile, UploadChangeParam, UploadFile, UploadProps } from "antd/lib/upload";
import axios from "axios";
import { useRef, useState } from "react";
interface Iidea {
    tags: number,
    flag: boolean,
    info: string
}
function UpdateContent() {
    const fileRef = useRef<any>();
    const workName = useRef<any>();
    const inputinner = useRef<any>();
    const description = useRef<any>();
    const divref = useRef<any>();

    const [loading, setLoading] = useState(false);
    const [imageUrl, setImageUrl] = useState<string>();
    const getBase64 = (img: RcFile, callback: (url: string) => void) => {
        const reader = new FileReader();
        reader.addEventListener('load', () => callback(reader.result as string));
        reader.readAsDataURL(img);

    };

    const beforeUpload = (file: RcFile) => {
        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
        if (!isJpgOrPng) {
            message.error('You can only upload JPG/PNG file!');
        }
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
            message.error('Image must smaller than 2MB!');
        }
        return isJpgOrPng && isLt2M;
    };

    const handleChange: UploadProps['onChange'] = (info: UploadChangeParam<UploadFile>) => {
        if (info.file.status === 'uploading') {
            setLoading(true);
            return;
        }
        if (info.file.status === 'done') {
            // Get this url from response in real world.
            getBase64(info.file.originFileObj as RcFile, url => {

                setLoading(false);
                setImageUrl(url);
                let cover = info.file.response.data.url
                localStorage.setItem("cover", cover)
            });
        }
    };


    const uploadButton = (
        <div>
            {loading ? <LoadingOutlined /> : <PlusOutlined />}
            <div style={{ marginTop: 8 }}>Upload</div>
        </div>
    );


    const arr = [
        { tags: 0, info: '分类', flag: true },
        { tags: 1, info: '人像', flag: false },
        { tags: 2, info: '黑白', flag: false },
        { tags: 3, info: '风光', flag: false },
        { tags: 4, info: '纪实', flag: false },
        { tags: 5, info: '街头', flag: false },
        { tags: 6, info: '建筑', flag: false },
        { tags: 7, info: '观念', flag: false },
        { tags: 8, info: '静物', flag: false },
        { tags: 9, info: '体育', flag: false },
        { tags: 10, info: '动物', flag: false },
        { tags: 11, info: '植物', flag: false },
        { tags: 12, info: '食品', flag: false },
        { tags: 13, info: '插画', flag: false },
        { tags: 14, info: '时尚', flag: false },
        { tags: 15, info: '其他', flag: false },
    ]
    const [list, setlist] = useState<Iidea[]>(arr)
    function getValue() {
        for (let i = 0; i < list.length; i++) {
            let obj = list[i];
            if (obj.flag == true) {
                return obj.info;
            }

        }
    }

    function changeE(e: any) {
        let v = e.target.value;
        let newList = [...list];
        for (let i = 0; i < newList.length; i++) {
            let obj = newList[i];
            if (obj.info == v) {
                obj.flag = true;
            } else {
                // console.log(obj.tags);
                obj.flag = false;
            }

        }
        setlist(newList);

    }
    const [display, setDisplay] = useState('none')
    function updataBtn() {
        setDisplay('flex')
    }

    // function prestatic() {
    //     let file = fileRef.current.files[0];
    //     let url = null;
    //     // if (window.createObjectURL != undefined) {
    //     // 	url = window.createObjectURL(file);
    //     // } else if (window.URL != undefined) {
    //     url = window.URL.createObjectURL(file);
    //     // } else if (window.webkitURL != undefined) {
    //     // 	url = window.webkitURL.createObjectURL(file);
    //     // }
    //     let box = divref.current;
    //     box.style.backgroundImage = `url(${url})`
    // }
    function submitBtn() {
        // let file = fileRef.current.files[0];
        let cover = localStorage.getItem('cover')
        let title = workName.current.value
        let abstrucont = inputinner.current.value;
        let descc = description.current.value
        let tags = 0;
        for (let i = 0; i < list.length; i++) {
            let obj = list[i];
            if (obj.flag == true) {
                tags = obj.tags
            }
        }

        axios.post('http://127.0.0.1:81/setdynamics', {
            cover, tags, title, abstrucont, descc
        }).then(function (res) {
            console.log(res);
        })
            .catch(function (error) {
                console.log(error);
            });


        // console.log(tags, title, abstrucont, descc);

    }
    return (
        <div >
            <button onClick={updataBtn}>上传</button>

            <div className="updataBox" style={{ display }}>
                <div className="upbox">
                    <div onClick={() => setDisplay('none')}>
                        <CloseOutlined style={{ fontSize: '28px', marginLeft: '1270px', color: '#ccc' }} />
                    </div>
                    <div className="inputbox">
                        <Upload
                            name="avatar"
                            listType="picture-card"
                            className="avatar-uploader"
                            showUploadList={false}
                            action="http://127.0.0.1:81/upload"
                            beforeUpload={beforeUpload}
                            onChange={handleChange}

                        >
                            {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%', height: '100%' }} /> : uploadButton}
                        </Upload>


                        {/* <div id="box" ref={divref}>
                            <input onChange={prestatic} type="file" ref={fileRef} />
                            <div> <PlusOutlined style={{ fontSize: "36px", color: "#ccc" }} /></div>
                        </div> */}
                        <div>
                            <input type="text" className="workName" placeholder="作品名称" ref={workName} />
                        </div>
                        <div>
                            <textarea className="description" id="" cols={30} rows={10} placeholder="描述性图片的故事，有利于推荐！" ref={description}></textarea>
                        </div>
                        <select value={getValue()} onChange={changeE} style={{ width: '500px', height: "40px", borderColor: 'rgb(227, 227, 227)' }}>
                            {
                                list.map((obj, index) => {
                                    return (
                                        <option key={obj.tags} value={obj.info}>{obj.info}</option>
                                    );
                                })
                            }
                        </select>
                        <div>
                            <input type="text" className="workName" placeholder="添加关键词描述" ref={inputinner} />
                        </div>
                    </div>
                    <div className="activBtn" onClick={submitBtn}>发布</div>
                </div>
            </div>
        </div>

    )
}
export default UpdateContent;